<template>
  <view class="container">
    <view class="title"> 单词回顾/消灭生词 </view>
    <view class="content">
      <view class="box">
        <view class="box_title">
          <text></text>
        </view>
        <view class="word">
          <view class="word_content">
            <view class="word_icon" @click="play()">
              <image
                src="https://hengxiao-resource.oss-cn-hangzhou.aliyuncs.com/web/resources/images/app/horn.png"
                mode="widthFix"
              ></image>
            </view>
          </view>
        </view>
        <view class="text">
          <text class="text_box" v-show="isShowWordMeaning">{{
            wordParaphrase
          }}</text>
          <view class="text_content">
            <text @click="wordMeaningSwitch()">{{ wordMeaningText }}词义</text>
          </view>
        </view>
      </view>
      <view class="box">
        <view class="section">
          <view class="input">
            <input type="text" placeholder="在此输入" v-model.trim="answer" />
          </view>
          <view class="switch">
            <text>软键盘</text>
            <u-switch
              v-model="isShowKeyboard"
              active-color="#f6c512"
              inactive-color="#0091ea"
              size="24"
            ></u-switch>
          </view>
        </view>
        <view class="keyboard">
          <Keyboard
            v-show="isShowKeyboard"
            ref="keyboard"
            :word="wordText"
            @updateAnswer="updateAnswer"
            @answerInformation="answerInformation"
          ></Keyboard>
        </view>
      </view>
    </view>
    <view class="button">
      <view class="button_content" v-if="!isSubmit" @click="nextQuestion()">
        <text>下一题</text>
      </view>
      <view class="button_content" v-else @click="submit()">
        <text>提交</text>
      </view>
    </view>
    <u-mask :show="isShowTestPopup" :zoom="false">
      <view class="popup_container">
        <view class="list" v-if="wordList.length > 0">
          <scroll-view class="list_scroll" scroll-y="true">
            <view class="item" v-for="(item, index) in wordList" :key="index">
              <text>生词: {{ item.word }}</text>
              <text>音标: {{ item.wordSoundmark }}</text>
              <text>中文释义：{{ item.wordParaphrase }}</text>
              <text>你的答案：{{ item.answer }}</text>
              <view class="item_image">
                <image
                  v-if="item.isCorrect"
                  src="https://hengxiao-resource.oss-cn-hangzhou.aliyuncs.com/web/resources/images/app/correct.png"
                  mode="widthFix"
                ></image>
                <image
                  v-else
                  src="https://hengxiao-resource.oss-cn-hangzhou.aliyuncs.com/web/resources/images/app/error.png"
                  mode="widthFix"
                ></image>
              </view>
            </view>
          </scroll-view>
        </view>
        <view class="popup_button" @click="handleBack()">
          <view class="popup_button_content">
            <text>返回生词本</text>
          </view>
        </view>
      </view>
    </u-mask>
    <Tips :show="showTips" :content="tipsContent"></Tips>
  </view>
</template>

<script>
const englishAudioContext = uni.createInnerAudioContext();
englishAudioContext.autoplay = true;
export default {
  components: {},
  props: {
    wordList: {
      type: Array,
      default: () => [],
    },
  },
  watch: {
    answer() {
      this.inputWord();
    },
  },
  created() {
    this.initData();
  },
  data() {
    return {
      wordText: "",
      wordParaphrase: "",
      isCorrect: false,
      wordMeaningText: "显示",
      isShowWordMeaning: false,
      isShowKeyboard: true,
      answer: "",
      currentWordIndex: 0,
      correctNumber: 0,
      correctList: [],
      isSubmit: false,
      isCanSubmit: true,
      isShowTestPopup: false,
      showTips: false,
      tipsContent: "请输入拼写单词！",
    };
  },
  methods: {
    initData() {
      this.wordData = this.wordList[this.currentWordIndex];
      this.wordText = this.wordData.word;
      this.wordParaphrase = this.wordData.wordParaphrase;
      this.wordAudio = this.wordData.wordAudio;
      this.isSubmit =
        this.currentWordIndex === this.wordList.length - 1 ? true : false;
      this.play();
    },
    initWord() {
      this.currentWordIndex++;
      this.isCorrect = false;
      this.answer = "";
    },
    play() {
      if (!englishAudioContext.paused) return;
      englishAudioContext.src = this.wordAudio;
      englishAudioContext.play();
    },
    nextQuestion() {
      if (!this.answer) {
        this.showTips = true;
        setTimeout(() => {
          this.showTips = false;
        }, 2000);
        return;
      }
      this.$refs.keyboard.checkRightAndWrong(this.answer);
      this.$set(this.wordList[this.currentWordIndex], "answer", this.answer);
      if (this.currentWordIndex >= this.wordList.length - 1) {
        this.$emit("showPopup", this.correctNumber, this.correctList);
        return;
      }
      this.initWord();
      this.initData();
    },
    submit() {
      if (this.isCanSubmit) {
        if (!this.answer) {
          uni.showModal({
            title: "温馨提示",
            content: "请输入拼写单词！",
            showCancel: false,
          });
          return;
        }
        this.$refs.keyboard.checkRightAndWrong(this.answer);
        this.$set(this.wordList[this.currentWordIndex], "answer", this.answer);
        this.$emit("showPopup", this.correctNumber, this.correctList);
        this.isCanSubmit = false;
      }
    },
    updateAnswer(answer) {
      this.answer = answer.join("");
    },
    answerInformation(flag) {
      this.isCorrect = flag;
      this.$set(this.wordList[this.currentWordIndex], "isCorrect", flag);
      if (flag) {
        this.correctNumber++;
        this.correctList.push({
          id: this.wordList[this.currentWordIndex].id,
          word: this.wordList[this.currentWordIndex].word,
        });
      }
    },
    inputWord() {
      this.$refs.keyboard.checkLetter(this.answer.split(""));
    },
    wordMeaningSwitch() {
      this.isShowWordMeaning = !this.isShowWordMeaning;
      this.wordMeaningText = this.wordMeaningText === "显示" ? "隐藏" : "显示";
    },
    showDetail() {
      this.isShowTestPopup = true;
    },
    handleBack() {
      this.$emit("back");
    },
  },
};
</script>

<style lang="scss" scoped>
@import "./WordTest2.scss";
</style>
